import React, { memo, useEffect, useState } from "react";
import { TitleStyle } from "./style";
import { useSelector, shallowEqual } from "react-redux";
import { getSizeImage, getMonthDay } from "@/utils/format-utils";

export default memo(function Title(props) {
  const [upDateTime, setUpDateTime] = useState("");

  const { topLists } = useSelector(
    (state) => ({
      topLists: state.getIn(["recommend", "topLists"]),
    }),
    shallowEqual
  );

  useEffect(() => {
    if (topLists.filter((item) => item.id == props.id).length != 0) {
      setUpDateTime(
        topLists.filter((item) => item.id == props.id)[0].updateFrequency
      );
    } else {
      setUpDateTime("刚刚更新");
    }
  }, [topLists, props.id]);

  return (
    <TitleStyle>
      <div className="cnt">
        <div className="imgBox">
          <img src={getSizeImage(props.imgUrl, 150)} alt="" />
        </div>
        <div className="cnt-r">
          <p className="cnt-r-name">{props.name}</p>
          <div className="updateTimeBox">
            <i className="time-icon"></i>
            <span>更新时间:{getMonthDay(props.updateTime)}</span>
            <span className="updt">({upDateTime})</span>
          </div>
          <div className="play-box">
            <div className="add-play-box">
              <button className="playauto">
                <span>播放</span>
              </button>
              <button className="addPlayList"></button>
            </div>
            <button className="forward-btn">
              <span className="forwardspan">{props.shareCount}</span>
            </button>
            <button className="download-btn">
              <span className="download-btn-span">下载</span>
            </button>
            <button className="assess-btn">
              <span className="assess-btn-span">{props.commentCount}</span>
            </button>
          </div>
        </div>
      </div>
    </TitleStyle>
  );
});
